<template>
    <button
        class="ui-button"
        :class="buttonClass"
        v-bind="$attrs"
        v-on="$listeners"
    >
        {{ label }}
    </button>
</template>

<script>
export default {
  name: 'UiButton',

  props: {
    type: {
      type: String,
      default: 'primary'
    },

    label: {
      type: String,
      required: true
    },

    fullWidth: {
      type: Boolean,
      default: false
    }
  },

  computed: {
    buttonClass () {
      const base = [`ui-button--${this.type}`]
      if (this.fullWidth) {
        base.push('is-full-width')
      }
      return base
    }
  }
}
</script>

<style scoped>
.ui-button {
    height: 3.4286em;
    padding: 0 3em;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    border: none;
    border-radius: 4px;
}
.ui-button--primary {
    background-color: #1890ff;
}
</style>
